<template>

  <!-- 技术评定 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      class="left fade_animition_left"
      :color="['#3A506A', '#3BD5FD']"
      style="height:84vh; width: 23vw"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <h6 class="l_title-s">地质灾害点调查等级数量统计</h6>
      <div class="assess_total">
        <el-badge class="assess_total-item" :value="item.num" v-for="item in leftTotal.itemList" :key="item.name">
          <el-button @click="onChange(item)" size="small" :disabled="item.num === 0" :class="currentActive === item.name ? '' : 'init_button'"
                     :type="currentActive === item.name ? 'primary' : ''">{{item.name}}
          </el-button>
        </el-badge>
      </div>
<!--      <h6 class="l_title-s">调查类型占比</h6>-->
<!--      <div ref="chart_1" class="chart_1"></div>-->
<!--      <dv-decoration-10 style="width:100%;height:5px;margin:24px 0"/>-->
      <h6 class="l_title-s">各路线风险数量排行</h6>
      <div class="left_paihang">
        <dv-scroll-ranking-board :config="leftTableConfig" class="dv_table_left"/>
      </div>

    </dv-border-box-13>

    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="height:84vh; width: 23vw;overflow:hidden"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-loading style="position: absolute;z-index: 9999;color:white" v-show="showLoading">Loading...</dv-loading>
      <dv-decoration-1 class="board_page-right-d" style="width:100px;height:40px;"/>

      <h6 class="l_title-s">地质灾害点最新调查记录</h6>
      <div class="rollScreen_container right_damage">
        <ul class="rollScreen_list">
          <transition-group name="list" tag="li" mode="out-in" >
            <li class="cell-box" v-for='item in rightTableList' :key='item.id' >
              <el-row>
                <el-col :span='6'>
                  <i class="el-icon-zoom-in" @click="_previewImg(0,item.picList)"
                     style="position: absolute;top: 35%;left: 8%;z-index: 20;color: white;font-size: 30px"></i>
                  <el-image fit="cover" @click="_previewImg(0,item.picList)" v-if="item.picList[0]"
                            :src='constUrl + item.picList[0]' class="dynamic-img">
                  </el-image>
                  <img v-else :src='defaultImg' width="90%"/>
                </el-col>
                <el-col :span='18' style="vertical-align: middle;">
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">位置：</el-col>
                    <el-col :span="18" class="color1">{{ item.location || "--" }}</el-col>
                  </el-row>
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">灾害类型：</el-col>
                    <el-col :span="18">{{ item.damageName || "--" }}</el-col>
                  </el-row>
                  <el-row class="cell-item">
                    <el-col :span="6" class="cell-text">时间：</el-col>
                    <el-col :span="18">{{ item.checkTime || "--" }}</el-col>
                  </el-row>
                </el-col>
              </el-row>
            </li>
          </transition-group>
        </ul>
      </div>
    </dv-border-box-13>
    <!-- 查看大图 -->
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
import PictureViewer from '@/components/picture-viewer'
import {damageRiskLevelCount, damageOrderInfo} from '@/services/model/data-board'
import Format from '@/utils/format'

const Echarts = require('echarts')
import constUrl from '@/services/env'

export default {
  components: {PictureViewer},
  data() {
    return {
      showLoading:true,
      // 当前激活的图表
      currentActive: '',
      constUrl,
      charts: null,
      // 右邊原始数据
      dynamicData: [],
      // 右边列表
      rightTableList: [],
      leftTable: [],
      // 排查总数统计
      leftTotal: {},
      defaultImg: require('../imgs/default.png'),
    }
  },
  computed: {
    leftTableConfig() {
      return {
        data: this.leftTable.map(x => ({name: x.name, value: x.num})),
        rowNum: 10,
      }
    }
  },
  methods: {
    // 查看大图
    _previewImg(index, urls) {
      const urlList = [];
      urls.map(x => {
        urlList.push(this.constUrl + x)
      })
      // 显示照片查看器
      this.$refs.imageViewer.showViewer(urlList, index);
    },
    // // 初始化echarts
    // initChart() {
    //   this.charts = Echarts.init(this.$refs.chart_1, null, {
    //     locale: 'ZH'
    //   })
    // },
    // 渲染数据
    updateChart(item) {
      let list = item.itemList  || []
      const data = list.filter((x) =>
        x.num !== 0
      ).map(x => ({name: x.name, value: x.num}))
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#5E52F9',
          '#266BFF',
          '#3BD5FD',
          '#2BF8E3',
          '#80FABA',
          '#E7BE65'
        ],
        series: [
          {
            type: 'pie',
            avoidLabelOverlap: false,
            top: 10,
            radius: ['50%', '100%'],
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
      this.charts.setOption(option)
      let currentIndex = 0
      setInterval(() => {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        this.charts.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        // 显示 tooltip
        this.charts.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }, 3000);
    },
    // 类型切换
    onChange(item) {
      this.currentActive = item.name
      this.leftTable = item.itemList || []
      // this.updateChart(item)
      this.$emit('changeMap',item.code)
    },
    // 隐患排查-最近数据轮播(TOP20)
    async queryRightList(deptTreeId, roadId) {
      clearInterval(this.dynamicInterval)
      this.dynamicData = []
      const {data} = await damageOrderInfo({deptTreeId, roadId})
      this.dynamicData = (data || []).map(x => {
        const checkTime = x.checkTime ? Format(new Date(x.checkTime)) : ''
        return {...x, checkTime}
      })
      this.setIntervalFun()
      this.showLoading = false
    },
    setIntervalFun() {
      if (!this.dynamicInterval) {
        this.dynamicInterval = setInterval(() => {
          if (this.dynamicData.length > 0) {
            let newData = this.dynamicData.shift()
            this.rightTableList.unshift(newData)
            if (this.rightTableList.length > 9) {
              this.rightTableList.pop()
            }
          }
        }, 2000)
      }
    },
    // 路线改变
    refresh(deptTreeId, roadId) {
      this.queryLeftTotal(deptTreeId, roadId)
      this.queryRightList(deptTreeId, roadId)
      // this.$emit('changeMap')
    },
    // 查询左边顶部的统计数据
    async queryLeftTotal(deptTreeId, roadId) {
      const {data} = await damageRiskLevelCount({deptTreeId, roadId})
      this.leftTotal = data || {}
      let init = data.itemList.filter((x) => x.num > 0);
      let initItem = init[0] || data.itemList[0]
      this.currentActive = initItem.name
      this.leftTable = initItem.itemList || []
      // this.updateChart(initItem || {})
      this.$nextTick(() => {
        this.$emit('changeMap',initItem.code)
      })
    },
  },
  mounted() {
    // this.initChart()
    // window.onresize = () => {
    //   this.charts.resize()
    // }
  },
  activated() {
    let deptTreeId = this.$route.params.deptTreeId
    let roadId = this.$route.params.roadId
    this.refresh(deptTreeId, roadId)
  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .dv_table_left {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 50vh;
  }

  .chart_1 {
    width: 100%;
    height: 30vh;
  }

  .init_button {
    background-color: #1f2a48;
    border: 1px solid #353f61;
    color: #547aff;
  }

  .list-enter-active, .list-leave-active {
    transition: all 0.5s;
  }

  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(-100%);
  }

  .rollScreen_container {
    overflow: auto;
    height: 200vh;
    margin-top: 1rem;
  }

  .cell-box {
    overflow: hidden;
    position: relative;
    padding: 1rem;
    margin: 0.4rem 0;
  }

  .color1 {
    color: #3BD5FD;
  }

  .cell-item {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #D5E3E8;
    position: relative;

    .cell-text {
      display: inline-block;
      /* width: 5.3rem; */
      color: #939EA3;
    }
  }

  .dynamic-img {
    height: 5.6rem;
    width: 90%;
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 50vh;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_2 {
    width: 100%;
    height: 250px;
  }

  .left-li {
    position: relative;
    margin: 1rem;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 1.125rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.75rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 1.8rem;
    vertical-align: bottom;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }
  .left_paihang{
    overflow:auto;
    height: 70vh
  }
  /*设置小的滚动条样式*/
  .left_paihang::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  .left_paihang::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: rgba(25, 38, 62, 0.5);;
  }
  .left_paihang::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(93, 255, 246, 1);
  }
  .right_damage{
    overflow:auto;height: 70vh
  }
  /*设置小的滚动条样式*/
  .right_damage::-webkit-scrollbar {
    width: 4px;
    /*height: 4px;*/
  }
  .right_damage::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
    background: rgba(93, 255, 246, 1);
  }
  .right_damage::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 0;
    background: rgba(255, 255, 255, 1);
  }
</style>
